<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card style="width: 100%;height: 600px">
      选择年份：
      <el-select style="width: 80px"
                 v-model="year"
                 filterable
                 default-first-option
                 placeholder="请选择年份"
                 @change="getMonthAmount"
      >
        <el-option
          v-for="item in yearsList"
          :key="item"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
      <!-- 2.为Echarts准备一个Dom -->
      <div class="charts" id="main" style="width: 750px;height:400px;"></div>
    </el-card>
  </div>
</template>

<script>
  // 1.导入echarts
  import echarts from 'echarts'
  const qs=require('querystring')
  export default {
    data () {
      return {
        //每月报销数额
        monthList: [],
        //各报销范围数量
        ratio: [],
        //可选年份
        yearsList: [2020,2019,2018,2017,2016,2015],
        //年份
        year: 2020
      }
    },
    created () {
      this.year = this.getNowYear()
    },
    // 此时,页面上的元素,已经被渲染完毕了
    mounted () {
      this.getMonthAmount()
    },
    methods: {
      async getMonthAmount(){
        // 3.基于准备好的dom，初始化echarts实例
        let temp = {
          year: this.year
        }
        let res = await this.$http.get('month-amount', {params: temp})
        if(res.status!==200){
          if(res.status === 403) {
            return this.$message.error('您没有查看报表的权限!')
          }
          return this.$message.error('获取每月报销数额失败！')
        }
        this.monthList = res.data
        let res1 = await this.$http.get('ratio',{params: temp})
        if(res1.status!==200) {
          if(res.status === 403) {
            return this.$message.error('您没有查看报表的权限!')
          }
          return this.$message.error('获取各报销范围数量失败！')
        }
        this.ratio = res1.data
        let option = {
          title: {
            text: '中科院力学所全年报销数额分布'
          },
          tooltip: {
            trigger: 'axis',  //每个数据有条线的提示效果
            axisPointer: {    //x和y轴上的数值提示
              type: 'cross',
                label: {
                backgroundColor: '#6AACEF'
              }
            }
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              top: '40%',
              containLabel: true
          },
          legend: {
            data: ['本月全所报销数额']
          },
          xAxis: {
            boundaryGap: false,
              data: ['一月', '二月', '三月', '四月', '五月', '六月','七月','八月','九月','十月','十一月','十二月']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '报销数额',
              type: 'bar',
              data: this.monthList
            },
            {
              type: 'pie',
              center: ['70%',70],
              radius: 35,
              data: this.ratio,
              itemStyle:{
                normal:{
                  label:{
                    show: true,
                    formatter: '{b} : {c} ({d}%)'
                  },
                  labelLine :{show:true}
                }
              }
            }
          ]
        }
        var myChart = echarts.init(document.getElementById('main'))
        console.log(option)
        myChart.setOption(option)
      },

      /**
       * 获取今年的年份
       * @returns {number} 年份
       */
      getNowYear() {
        var myDate = new Date();
        var nowYear = myDate.getFullYear();
        return nowYear
      }
    }
  }
</script>

<style lang="less" scoped>
.charts{
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>
